<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM渲染表格</title>
		<script>
			var userList = [{
					name: "林俊杰",
					age: 21,
					grade: "20224128",
					sex: 0,
					hobby: undefined
				},
				{
					name: "邓紫棋",
					age: 21,
					grade: "20224129",
					sex: 1,
					hobby: null
				},
				{
					name: "刘德华",
					age: 20,
					grade: "20224128",
					sex: 0,
					hobby: ["演唱会", "拍电影"]
				},
				{
					name: "Beyond",
					age: 26,
					grade: "20224128",
					sex: 0,
					hobby: []
				},
				{
					name: "杨幂",
					age: 20,
					grade: "20224129",
					sex: 1,
					hobby: ["追剧"]
				},
				{
					name: "周杰伦",
					age: 21,
					grade: "20224128",
					sex: 0,
					hobby: ["唱歌", "mojito"]
				},
				{
					name: "kunkun",
					age: 19,
					grade: "20224129",
					sex: 0,
					hobby: ["唱", "跳", "rap", "篮球"]
				}
			]
		</script>
		<style>
			table {
				border: 1px solid #ccc;
				border-collapse: collapse; // 单元格边框共享
			}
			th,td {
				border: 1px solid #ccc;
				width: 200px;
				padding: 10px;
				text-align: center;
			}
			/* 偶数行 */
			.tr-0 {
				background-color: #CCC;
			}
			/* 奇数行 */
			.tr-1 {
				background-color: #ebebeb;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="tr-1">
					<td>张三</td>
					<td>20</td>
					<td>20232121</td>
					<td>男</td>
					<td>编程</td>
					<td>
						<!-- this放到哪个标签中，就代表这个标签的DOM对象 -->
						<button onclick="del(this)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		// 删除所在行
		// obj代表了button对象
		function del(obj) {
			// 删除行
			obj.parentElement.parentElement.remove()
			changeStyle()
		}
		
		// 斑马纹实现
		function changeStyle() {
			// 重新分配class
			// 重新获取tbody中的所有tr，循环判断奇偶行
			let trs = document.getElementsByTagName('tr')
			// 循环时，排除第一行（标题）
			for(let i = 1; i < trs.length; i ++) {
				// 取出每一个循环的tr对象
				let tr = trs[i]
				// i:1，奇数行
				// i:2，偶数行
				if(i % 2 === 0) {
					// i：2，4，6...偶数行
					tr.className = 'tr-0'
				} else {
					// i：1，3，5...奇数行
					tr.className = 'tr-1'
				}
			}
		}
		
		// 根据数组数据循环添加表格行
		function init() {
			// 定位tbody元素，尽量少做查询操作
			let t_body = document.getElementsByTagName('tbody')[0]
			// 循环数组
			// 数组的索引范围：[1, 2, 3],长度是3，索引范围是0-2
			for(let i = 0; i < userList.length; i ++) {
				// 1.取出当前循环的对象
				let user = userList[i]
				// 2.产生一个tr
				let new_tr = document.createElement('tr')
				// 3.tr里面增加6个td
				// 3.1增加姓名单元格
				let new_td = document.createElement('td')
				new_td.innerText = user.name
				// 将td追加到tr中
				new_tr.appendChild(new_td)
				// 3.2增加年龄单元格
				new_td = document.createElement('td') // 重新创建了一个空的单元格
				new_td.innerText = user.age
				new_tr.appendChild(new_td)
				// 3.3增加班级单元格
				new_td = document.createElement('td') // 重新创建了一个空的单元格
				new_td.innerText = user.grade
				new_tr.appendChild(new_td)
				// 3.4增加性别单元格
				new_td = document.createElement('td') // 重新创建了一个空的单元格
				new_td.innerText = user.sex === 0 ? '男' : '女'
				new_tr.appendChild(new_td)
				// 3.5增加爱好单元格
				new_td = document.createElement('td') // 重新创建了一个空的单元格
				new_td.innerText = user.hobby === undefined ? '' : user.hobby
				new_tr.appendChild(new_td)
				// 3.6增加删除按钮的单元格
				new_td = document.createElement('td')
				new_td.innerHTML = "<button onclick='del(this)'>删除</button>"
				new_tr.appendChild(new_td)
				// 3.7判断奇偶行，分别添加class
				// if(i % 2 === 0) {
				// 	// 偶数行
				// 	new_tr.className = 'tr-0'
				// } else {
				// 	// 奇数行
				// 	new_tr.className = 'tr-1'
				// }
				// 4.tr追加到表格中
				t_body.appendChild(new_tr)
			}
			// 循环完了，已经添加了很多个tr，重新分配样式
			changeStyle()
		}
		init()
	</script>
</html>